<script setup lang="ts">
import {getCurrentInstance, inject, reactive, ref} from "vue";
import {showToast} from "vant";

const {proxy} = getCurrentInstance() as any; // 类似于this
let show = inject('showCash',ref(false))
const  closeShow = ()=>{
  show.value = false
}

let params = reactive({
  data:{
    zfbName:'',
    zfbAccount:''
  }
})
let toCash = async()=>{
  if(params.data.zfbName=="" || params.data.zfbAccount==""){
    return showToast('支付宝账号或姓名不为空')
  }
  await proxy.$API.User.toBalance({token: localStorage.getItem('token'),...params.data}).then(res => {
    if(res.code==200){
      showToast('提现成功')
    }else {
      showToast(res.remark)
    }
    //重置
    params.data= {
      zfbName:'',
      zfbAccount:''
    }
    closeShow()
  })
}
</script>

<template>
  <div class="showBox" v-if="show" @click="closeShow">
    <div class="show" @click.stop>
      <div class="title">
        提现提醒：提现预计在一个小时内提现成功 提现高峰期可能会有延迟，请耐心等待。
      </div>
      <input type="text" class="input" v-model="params.data.zfbName" placeholder="请输入提现支付宝账号">
      <input type="text" class="input" v-model="params.data.zfbAccount" placeholder="请输入实名姓名">
      <div class="up" @click="toCash">
        确认提现
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.showBox{
  width: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  display: flex;
  background-color: rgba(0,0,0,0.3);
  z-index: 99;
  justify-content:center;
  align-items: center;
  .show{
    width:calc( 283px - 32px);
    background-color: white;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    padding: 32px 16px 13px 16px;
    .title{
      width: 100%;
      line-height: 15px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-size: 13px;
      color: #000000;
      margin-bottom: 21px;
      text-overflow: ellipsis;
    }
    .input{
      width: 100% ;
      height: 38px;
      background: #E6E4E4;
      border-radius: 7px;
      opacity: 0.63;
      color:black;
      font-size: 12px;
      border: none;
      text-indent: 10px;
      margin-bottom: 14px;
    }
    .up{
      width: 100%;
      height: 42px;
      border-radius: 5px;
      background-image: linear-gradient(to right,#4C64FF,#313CAB);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: black, "Niagara Engraved", sans-serif;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 23px;
    }
  }
}
</style>